<template>
  <div>
    <div class="work-container" v-for="item in dataList" :key="item.worksId">
      <div class="work-video-left">
        <img :src="item.coverPath" />
      </div>
      <div class="work-video-right">
        <p class="video-theme">
          {{ item.worksDesc
          }}<template v-for="topic in item.topicList">
            #{{ topic.topicTitle }}</template
          >
        </p>
        <div class="work-skill">
          <i class="el-icon-view"></i>
          <p>1.7w</p>
          <i class="el-icon-chat-dot-square"></i>
          <p>{{ item.commentCounts }}</p>
          <i class="iconfont icon-aixin"></i>
          <p>{{ item.collectCounts }}</p>
        </div>
        <span style="color: #70b571; margin-right: 15px; font-size: 13px">{{
          item.status | filterStatus
        }}</span
        ><span style="color: #a5a5a5; font-size: 13px">{{
          item.updateTime | formatDate
        }}</span>
        <div class="feature">
          <div class="feature-box">
            <li @click="workDescription()">
              <i class="el-icon-edit"></i>
              <p>修改描述和封面</p>
            </li>
            <li @click="workAuthority()">
              <i class="el-icon-lock"></i>
              <p>设置权限</p>
            </li>
            <li>
              <i class="el-icon-top"></i>
              <p>置顶作品</p>
            </li>
            <li>
              <i class="el-icon-delete"></i>
              <p>删除作品</p>
            </li>
            <li>
              <i class="el-icon-tickets"></i>
              <p>添加广告</p>
            </li>
            <!-- <li @click="productDrawer = true"> -->
            <li @click="addProduct()">
              <i class="el-icon-sell"></i>
              <p>添加商品</p>
            </li>
          </div>
        </div>
      </div>
      <div>
        <el-dialog
          title="修改作品描述和封面"
          :visible.sync="dialogVisible"
          width="30%"
          append-to-body
          class="change-description"
          :before-close="handleClose"
        >
          <div>
            <div>
              <p style="margin-bottom: 5px">图文标题</p>
              <el-input
                type="text"
                placeholder="为作品添加一个合适的标题，最多不超过20字"
                v-model="text"
                maxlength="10"
                show-word-limit
                class="photo-title"
              >
              </el-input>
            </div>
            <div>
              <p style="margin: 10px 0 5px 0">作品描述</p>
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="item.worksDesc"
                maxlength="500"
                show-word-limit
                :rows="4"
              >
                <template v-for="topic in item.topicList">
                  #{{ topic.topicTitle }}</template
                >
              </el-input>
            </div>
            <div class="add-topic">
              <el-button># 添加话题</el-button>
            </div>
            <div class="cover-photo">
              <p class="cover-title">设置封面</p>
              <div style="display: flex">
                <div class="cover-left"><img :src="item.coverPath" /></div>
                <div class="cover-right">
                  <el-button
                    type="text"
                    class="el-icon-edit"
                    @click="changePicture()"
                    >编辑封面</el-button
                  >
                  <p>好封面会吸引更多人浏览作品查看封面建议</p>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="cover-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >修 改</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          title="权限设置"
          :visible.sync="dialogAuthorityVisible"
          append-to-body
          class="set-authority"
          width="30%"
          :before-close="handleClose"
        >
          <div class="authority-message">
            <div class="authority-message-left">
              <img :src="item.coverPath" />
            </div>
            <div class="authority-message-right">
              <p>{{ item.worksDesc }}</p>
            </div>
          </div>
          <div>
            <p class="see-authority">谁可以看</p>
            <el-radio-group v-model="seeStatus" size="small">
              <el-radio label="1" border>公开</el-radio>
              <el-radio label="2" border>好友可见</el-radio>

              <el-radio label="3" border>仅自己可见</el-radio>
            </el-radio-group>
          </div>
          <div>
            <p class="video-authority">允许他人保存视频</p>
            <el-radio-group v-model="videoStatus" size="small">
              <el-radio label="1" border>允许</el-radio>
              <el-radio label="2" border>不允许</el-radio>
            </el-radio-group>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogAuthorityVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogAuthorityVisible = false"
              >保 存</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          title="上传封面"
          :visible.sync="dialogPicture"
          width="50%"
          append-to-body
          class="dialog-picture"
          :before-close="handleClose"
        >
          <div>
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogPicture = false">取 消</el-button>
            <el-button type="primary" @click="dialogPicture = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
    <!-- <div>
      <el-drawer
        title="我是标题"
        :visible.sync="productDrawer"
        append-to-body
        :with-header="false"
        :size="size"
      >
        <div>
          <div class="add-product">
            <el-carousel height="260px">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="product-box">
            <div class="product-price">￥<span>5.1</span></div>
            <p class="product-title">
              辣条零食大礼包多种混合大全组合怀旧儿时辣片网
              红8090回忆小包装辣条零食大礼包多种混合大全组合怀旧儿时辣片网
              红8090回忆小包装
            </p>
          </div>
          <div class="img-line">
            <img src="../assets/images/product-detail.png" />
          </div>
          <div class="product-box">
            <h4>产品参数</h4>
            <ul class="product-part">
              <li>
                <span>储存条件</span>
                <p>常温</p>
              </li>
              <li>
                <span>食品生产许可证编号</span>
                <p>SC12432032302067</p>
              </li>
              <li>
                <span>净含量</span>
                <p>15g</p>
              </li>
              <li>
                <span>生产企业名称</span>
                <p>徐州湘味食品生产有限公司</p>
              </li>
              <li>
                <span>产地</span>
                <p>中国大陆</p>
              </li>
            </ul>
          </div>
        </div>
      </el-drawer>
    </div> -->
    <div>
      <el-dialog
        title="添加商品"
        :visible.sync="dialogProduct"
        width="40%"
        :before-close="handleClose"
        append-to-body
      >
        <div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品价格">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="商品标题">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="商品存储方式">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="食品生产许可证编号">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="净含量">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="生产企业名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="产地">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogProduct = false">取 消</el-button>
          <el-button type="primary" @click="dialogProduct = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      form: {},
      size: "350px",
      productDrawer: false,
      text: "",
      textarea: "",
      seeStatus: "1",
      videoStatus: "1",
      dialogVisible: false,
      dialogAuthorityVisible: false,
      dialogPicture: false,
      dialogProduct: false,
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
       // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy-MM-dd hh:mm");
      }
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterStatus: function (val) {
      //  请求作品状态：-1：全部作品 0：禁用作品 1：审核通过作品 2：待审核作品 3：未通过作品
      var typeArr = ["已发布", "禁用", "已发布", "审核中", "未通过"];
      return typeArr[val - 1];
    },
  },
  props: ["dataList", "status"],
  methods: {
    workDescription() {
      this.dialogVisible = true;
    },
    workAuthority() {
      this.dialogAuthorityVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changePicture() {
      this.dialogPicture = true;
    },
    addProduct() {
      this.dialogProduct = true;
    },
  },
};
</script>

<style>
.work-container {
  display: flex;
  margin-top: 10px;
  padding: 15px 15px;
  box-sizing: border-box;
}
.work-container:hover {
  background: #f8f8f8;
  border-radius: 8px;
}
.work-container:hover .feature {
  display: block;
}
.work-video-left img {
  width: 150px;
  height: 200px;
  border-radius: 8px;
}
.work-video-right {
  margin-left: 10px;
  line-height: 1.5;
}
.work-skill i {
  line-height: 30px;
  margin-right: 3px;
  color: #ada0a0;
}
.video-theme {
  font-size: 14px;
}
.work-skill {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.work-skill p {
  margin-right: 15px;
  color: #a5a5a5;
  font-size: 13px;
}

.feature {
  /* display: flex; */
  color: #897f7f;
  font-size: 13px;
  height: 22px;
  line-height: 22px;
  margin-top: 100px;
  font-weight: 600;
  display: none;
}
.feature i {
  line-height: 22px;
  margin-right: 3px;
}
.feature p {
}
.feature-box {
  display: flex;
}
.feature-box li {
  display: flex;
  margin-right: 20px;
  cursor: pointer;
}
.cover-left img {
  width: 100px;
  height: 130px;
  border-radius: 10px;
}
.cover-right {
  margin-left: 10px;
}
.cover-right .el-icon-edit:before {
  margin-right: 3px;
}
.cover-right .el-button {
  border: none;
  font-size: 14px;
  color: #888c95;
}
.cover-right p {
  font-size: 12px;
  color: #888c95;
  bottom: 82px;
  position: absolute;
}
.cover-title {
  color: #888c95;
  font-weight: 600;
  padding: 15px 0 6px 0;
}
.cover-footer .el-button {
  padding: 10px 12px;
  font-size: 14px;
}
.authority-message {
  display: flex;
  height: 78px;
  background: #f4f5f5;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 5px;
}
.authority-message-left img {
  width: 65px;
  border-radius: 6px;
}
.authority-message-right {
  margin-left: 10px;
}
.authority-message-right p {
  margin-top: 5px;
}
.add-product .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.add-product .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.add-product .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.product-box {
  width: 96%;
  background: #fff;
  border-radius: 5px;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
}
.add-product .el-drawer__body {
  background: #f5f6f9;
}
.img-line {
  margin: 10px 0;
  text-align: center;
}
.img-line img {
  width: 50%;
  height: 18px;
}
.product-price {
  color: #fe496a;
  font-weight: 600;
  font-size: 12px;
}
.product-price span {
  font-size: 18px;
}
.product-title {
  font-weight: bold;
  font-size: 12px;
  margin: 10px 0;
}
.product-part li {
  display: flex;
  font-size: 14px;
  margin-top: 10px;
}
.product-part li span {
  color: #c5c5c5;
  width: 85px;
  margin-right: 25px;
}
.product-part li p {
}
.dialog-picture .el-dialog__body {
  padding: 30px 15px;
}
</style>
